<template>
  <div class="page immediateAtten-page" data-page="immediateHandle" style="z-index: 2;">
      <div class="link-page-nav">
          <a href="#" class="link" @click=$root.backToTab()>
              <i class="iconfont icon-zuo"></i>
          </a>
      </div>
      <div class="link-page-top">
          <div class="link-page-title">任务领取</div>
      </div>
      <div class="page-content immediateAtten-content" style="padding-bottom: 100px;margin: 10px 20px;">
          <div class="imm-page" id="chooseType">
              <div class="title">选择操作方法</div> 
              <div class="option">
                  <div class="option-list on" type-id="1">
                      <div class="dot active"></div> 
                      <div class="text">A：领取，但是稍后处理</div>
                  </div>
                  <div class="option-list" type-id="2">
                      <div class="dot"></div> 
                      <div class="text">B：现在就处理</div>
                  </div>
              </div>
          </div>
          <div class="imm-page-center imm-page" id="nowCancel">
              <div class="title">选择处理类型</div>
              <div class="option" id="handlType"></div>
              <div class="title">添加备注</div>
              <textarea name="" id="crTb_textarea" class="imm-text cancle-ios-write"  placeholder="请输入备注"></textarea>
              <div class="ilink-voice">
                  <div id="crTb_inputDetails" class="voice-before">
                      <i class="iconfont icon-yuyin1"></i>点击语音输入
                  </div>
                  <div class="voice-after" style="display: none">
                      <div class="voice-after-time"><i class="iconfont icon-yuyin-copy"></i></div>
                      <div class="delete"><i class="iconfont icon-icon-shanchu-copy"></i></div>
                  </div>
              </div>
              <div class="title">添加现场照片或视频</div>
              <div class="imm-swaper" id="immUpload"></div>
              <br/>
              <div class="title">一并处理其他警情</div>
              <div class="imm-choose-alarm"  id="del-other-police">
                  <input type="text" placeholder="请选择添加其他警情"  disabled />
              </div>
              <br/>
              <div class="title releve-plan">关联预案</div>
              <div class="imm-choose-alarm releve-plan"  id="select_plan" >
                  <input type="text" placeholder="请选择添加预案" disabled />
              </div>
              <br/>
          </div>
          <div class="releve-plan" style="margin-top: 20px;margin-bottom: 20px;display: none;" id="createEmergencyBtn">
              <label  class="item-checkbox item-content">
              <input checked type="checkbox" id="isToEmegency" name="createEmergency" value="11111"/>
              <i class="icon icon-checkbox" style="display:inline-block;margin-right:12px;"></i>
              <span class="point-details">同步创建应急救援</spam>
          </div>
          <div class="imm-page-bottom" @click="quitFireHazardCancel">确定</div>
          <br/>
      </div>
  </div>
</template>

<script>
    return {
        mounted() {
            var self = this;
            var $ = self.$$;
            self.recordId = self.$route.params.id;
            self.recordCreateTime = self.$route.params.createTime;
            self.recordHandlerStatus = self.$route.params.status;
            self.recordOrgId = self.$route.params.orgId;
            var obj = {};
            obj.id= self.recordId;
            obj.createTime= self.recordCreateTime;
            self.policeArr.push(obj);
        },
        data: function () {
            return {
              recordId:"",
              recordCreateTime:"",
              recordHandlerStatus:"",
              recordHandlerStatus:"",
              recordOrgId:0,
              optionType:1,
              dictKey:"",
              picArr:[],
              policeArr:[],
              planId:-1,
              voiceFlag:false,
              voiceUrl:"",
              keyIssues_unHandlerCount:null,
              keyIssues_handlerCount:null,
              getNewId: (new Date()).getTime()
            }
        },
        methods: {
            getKeyCancelType:function(){
                var self = this;
                var $ = self.$$;
                $("#handlType").empty();
                Dao.getDict({
                    code:60,
                    userName:userInfor.accountName
                },function(data){
                    if (data.dictValueObj && data.dictValueObj.length > 0) {
                        for (var i = 0; i < data.dictValueObj.length; i++) {
                            $("#handlType").append(`<div class="option-list getKeyCancelType-cancel-type" id=`+data.dictValueObj[i].dictKey+`>
                                <div class="dot"></div> 
                                <div class="text">`+data.dictValueObj[i].dictValue+`</div>
                            </div>`);
                        }
                    }
                    $(".getKeyCancelType-cancel-type").click(function(event) {
                        $(".getKeyCancelType-cancel-type").removeClass('on');
                        $(".getKeyCancelType-cancel-type .dot").removeClass("active");
                        $(event.currentTarget).addClass('on');
                        $(event.currentTarget).find(".dot").addClass("active");
                        var dictKey = $(event.currentTarget).attr("id");
                        self.dictKey = dictKey;
                        if(self.dictKey==2){
                            $(".releve-plan").show();
                        }else{
                            $(".releve-plan").hide();
                        }
                    });
                });
            },
            linkPlan:function(){
                var self = this;
                var $ = self.$$;
                //应急预案
                var planType = [];
                Dao.selectEmergencyPlanInfo({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    orgIds:userInfor.organizationIds,
                    pageSize:100,
                    pageIndex:0
                },function(data) {
                    if(data&&data.length>1){
                        for(var i=0;i<data.length;i++){
                            var obj = {};
                            obj.id= data[i].id;
                            obj.name= data[i].name;
                            planType.push(obj);
                        }
                    }  
                });

                let selectOptionIndex = null;
                jQuery("#select_plan").click(function(e) {
                    if(planType.length>0){
                        selectOptionFn(planType,function(data){
                            if(self.planId == data.id){
                                $("#selected_plan").removeClass("select-active");
                                jQuery("#selected_plan input").val("");
                                self.planId=-1;
                            }else{
                                jQuery("#selected_plan input").val(data.name);
                                $("#selected_plan").addClass("select-active");
                                self.planId=data.id;
                            }
                            if(selectOptionIndex != data.index){
                                selectOptionIndex = data.index;
                            }else{
                                selectOptionIndex = "";
                            }
                        },selectOptionIndex);
                    }else{
                        app.methods.showToastCenter('暂无相关预案信息'); 
                    }                
                }); 
            },
            //领取任务,但是不处理
            getTask:function(){
                var self = this;
                var $ = self.$$;
                var policeInfo=self.policeArr;
                var info = JSON.stringify(policeInfo).toString()// JsonArray转为String
                Dao.handleFireRecord({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    status:2,
                    fireTypeId:1,
                    operator:userInfor.accountName,
                    disableElevator: "-1", // 梯控 不处理传-1 固定值
                    recordsInfosStr:info
                },function(data){
                    app.methods.showToastBottom("警情领取成功");
                    let alarming = JSON.parse(localStorage.getItem("ilink-alarming-push"))
                    alarming.handlerStatus = 2
                    localStorage.setItem("ilink-alarming-push",JSON.stringify(alarming))
                    app.router.back(2);
                }); 
            },
            quitFireHazardCancel :function(){
                var self = this;
                var $ = self.$$;
                if(self.optionType==1){
                    self.getTask();
                }else{  
                    if (self.voiceFlag){
                        self.voiceFlag = false;
                        native.saveTheVoiceFile(self.chargeCompany*1);
                    } else {
                        if(getClickEnabel(4000)){
                          self.quitCancelAlarm("",0);
                        }
                    }
                }
            },
            //立即处理
            quitCancelAlarm:function(voiceUrl,wavLength){
                var self = this;
                var $ = self.$$;
                var policeInfo=self.policeArr;
                //同步创建应急救援
                var isOpenPlan=0;
                if(jQuery("#isToEmegency").prop("checked")){
                    if(self.dictKey==2){
                        isOpenPlan=1;
                    }else{
                        isOpenPlan=0;
                    }
                }
                var info = JSON.stringify(policeInfo).toString()// JsonArray转为String
                var text = $("#crTb_textarea").val();
                self.picUrls = self.picArr.join(",");
                if(!self.dictKey){
                    app.methods.showToastBottom("请输入选择处理类型");
                    return;
                }
                if(!text){
                    app.methods.showToastBottom("请输入备注信息");
                    return;
                }
                if(self.dictKey==2&&self.planId==-1){
                    app.methods.showToastBottom("请选择预案");
                    return;
                }
                Dao.handleFireRecord({
                    userName:userInfor.accountName,
                    deviceId:appKeyObj.deviceId,
                    status:1,
                    fireTypeId:1,
                    operator:userInfor.accountName,
                    handleTypeId:self.dictKey,
                    remark:text,
                    remarkVoice:"",
                    planId:self.planId==-1?"":self.planId,
                    picUrl:self.picUrls,
                    isOpenPlan:isOpenPlan,//是否创建了应急救援，0未创建，1创建
                    recordsInfosStr:info
                },function(data){
                    app.methods.showToastBottom("警情处理成功");let alarming = JSON.parse(localStorage.getItem("ilink-alarming-push"))
                    alarming.handlerStatus = 1
                    localStorage.setItem("ilink-alarming-push",JSON.stringify(alarming))
                    app.router.back(2);
                });
            },
            //语音文字输入回调
            voiceCollectionData:function(voiceStr,currentEl) {
                var text = $("#"+currentEl)[0].value;
                if(!voiceStr || "" === voiceStr.trim()){
                    app.methods.showToastCenter("未能识别您说的语音,请重试");
                }else{
                    $("#"+currentEl).val(text + voiceStr);
                }
            },
            //语音url和长度回调
            //前端提醒原生上传语音之后的回调   这里为什么要前端先调原生?
            callbackVoiceFile:function(voiceUrl,wavLength){
                self.quitCancelAlarm(voiceUrl,wavLength);
            },
            //这是干嘛的？
            getImportantHandlerData:function(){
                var self = this;
                var $ = self.$$;
                Dao.getImportantQuestionCount({
                  userName: userInfor.accountName,
                  organizationIds:userInfor.organizationIds
                },function(re){
                  self.keyIssues_unHandlerCount = re.unHandlerCount;
                  self.keyIssues_handlerCount = re.handlerCount;
                },false);
            },
        },
        on:{
          pageAfterIn: function (e, page) {
                var self = this;
                var $ = self.$$;
                //展示类型
                self.getKeyCancelType();

                $(".option-list").click(function(e){
                    jQuery(".option-list").removeClass("on");
                    jQuery(".option-list .dot").removeClass("active");
                    jQuery(this).addClass("on");
                    jQuery(this).find(".dot").addClass("active");
                    self.optionType = jQuery(this).attr("type-id");
                    if(self.optionType==1){
                        $("#nowCancel").hide();
                    }else{
                        jQuery(".immediateAtten-content").animate({scrollTop: '150px'}, 400);
                        $("#nowCancel").show();
                    } 
                });

                //初始化上传
                upLoadImagesCompt(jQuery("#immUpload"),function(pic,isAdd){
                    if(isAdd == "add"){
                        self.picArr.unshift(pic);
                    }else{
                        let index = self.picArr.indexOf(pic);
                        self.picArr.splice(index,1);
                    }
                },true,null,'immUpload_container_' + self.getNewId,'immUpload_pick_' + self.getNewId,'',true,'',true);


                //一并处理其他警情
                var selectOptionDec=[];
                var selectOptionDecEltype="";
                var dataType="";
                jQuery("#del-other-police").click(function(e) {
                    getNeedManulAlart(self.recordOrgId,function(data){
                        self.policeArr = data.selectedIds;
                        var isHave=true;//判断是否包含起本身警情
                        for(var i=0;i<self.policeArr.length;i++){
                            if(self.policeArr[i].id==self.recordId){
                                isHave=false;
                            }
                        }
                        if(isHave){//不包含的情况
                            var obj = {};
                            obj.id= self.recordId;
                            obj.createTime= self.recordCreateTime;
                            self.policeArr.push(obj);
                        }
                    },false,self.policeArr,selectOptionDecEltype,dataType,self.recordId);
                });

                //关联预案
                self.linkPlan();

                //已经被领取
                if(self.recordHandlerStatus==2){
                    $("#nowCancel").show();
                    $("#chooseType").hide();
                    self.optionType = 2;
                }else{
                    $("#nowCancel").hide();
                    $("#chooseType").show();
                    self.optionType = 1;
                }

                //绑定语音输入隐患描述
                $("#crTb_inputDetails").click(function(e) {
                    //第二个参数是否需要保存语音
                    if(getClickEnabel(4000)){
                        self.voiceFlag = true;
                        native.startVoice("crTb_textarea",true);
                    };
                });
          },
          pageBeforeRemove: function(e, page) {}
        }
    }
</script>